<template>
	<view>

		<!-- 积分区域 -->
		<view class="flex ac jb integralbox">
			<view class="integral flex ac">
				<image class="integral-image" src="../../static/jifenlogo.png"></image>
				<view class="integral-much flex ac">
					<text style="font-size: 29rpx;margin-left:10rpx">我的积分</text>
					<text style="font-size: 31rpx;margin-left:6rpx;">{{integral}}</text>
				</view>
			</view>
			<view class="flex ac">
				<view @click="integralda" class="detail">积分明细</view>
				<view @click="explain" class="obtain">如何获得?</view>
			</view>
		</view>

		<!-- tab区域 -->
		<scroll-view class="navbar" scroll-x="true" :scroll-into-view="'navbar'+selectClassifyIda"
			scroll-with-animation="true" :scroll-left="sleft">
			<view class="tabListCon flex ac">
				<view @tap="tabListChange(item.id)" class="nav-item"
					:class="selectClassifyId==item.id?'tabListItems':''" :id="'navbar'+item.id"
					v-for="(item,index) in datalia" :key="index">
					<image style="width: 73rpx;height:73rpx" mode="widthFix" :src="item.picture"></image>
					<view style="width: 112rpx;height: 50rpx;text-align: center;">
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 轮播图 -->
		<view class="lunbo">
			<view class="swiper-view">
				<swiper class="swiperfada" autoplay="true" circular="false" duration="500" interval="3888"
					@change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.imageurl" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</swiper>
				<view class="dots">
					<block v-for="(item,unique) in imgUrls" :key="unique">
						<view class="dot" :class="unique == swiperCurrent?'active':''"></view>
					</block>
				</view>
			</view>
		</view>

		<!-- 列表数据 -->
		<view class="listbox">
			<view class="left">
				<block v-for="(item,index) in dataList" :key="index">
					<view v-if="index%2==0" class="item" @click="detailsa(item.id)">
						<view class="item-img">
							<image mode="aspectFill" class="item-imgurl" :src="item.main_picture"></image>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-title">{{item.name}}</view>
						<view class="item-platform jb">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text
										style="font-size: 38rpx;color:#FF411F;font-weight: 800;">{{item.currency}}</text>
									<text style="font-size: 26rpx;color:#FF411F;font-weight: 600;">积分</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item,index) in dataList" :key="index">
					<view v-if="index%2==1" class="item" @click="detailsa(item.id)">
						<view class="item-img">
							<image mode="aspectFill" class="item-imgurl" :src="item.main_picture"></image>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-title">{{item.name}}</view>
						<view class="item-platform jb">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text
										style="font-size: 38rpx;color:#FF411F;font-weight: 800;">{{item.currency}}</text>
									<text style="font-size: 26rpx;color:#FF411F;font-weight: 600;">积分</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>
		
		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width: 332rpx;" mode="widthFix"
				src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/ww_wawaji_kongbaiye-8084012.png">
			</image>
			<view class="nodatatext">暂无数据</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				integral: 0, //我的积分
				sleft: '',
				assignmentid:0,
				selectClassifyId: 0,
				selectClassifyIda: 0,
				// datalia: [{
				// 		id: 0,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FpM_fblxpxB1rNNlLhGhl3dWe_Re.png',
				// 		name: '推荐'
				// 	},
				// 	{
				// 		id: 1,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fn8GalANPaZ1gN_N_1yGbpEZoBwj.png',
				// 		name: '户外踏青'
				// 	},
				// 	{
				// 		id: 2,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fht6MZOEDwd25sI8HVEBxEZNWKgC.png',
				// 		name: '家居日用'
				// 	},
				// 	{
				// 		id: 3,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FoLIjqUUudqA8GkkkMM2HA0cf2Gx.png',
				// 		name: '本周新品'
				// 	},
				// 	{
				// 		id: 4,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FpufvIWNNUmXwchzE_PmT55LD4wU.png',
				// 		name: '美妆个护'
				// 	},
				// 	{
				// 		id: 5,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FuqMLyKDHdKfbecG9iVHt0Oksttv.png',
				// 		name: '潮玩营地'
				// 	},
				// 	{
				// 		id: 6,
				// 		image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgeDWU5tPLHKD-DoB_uNxGG4Pze3.png',
				// 		name: '数码电器'
				// 	},
				// ],
				datalia: [],
				imgUrls: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fmz1A6oFItzeGs-A1G2_E9eSEgS6.png?imageView2/2/w/700',
						id: 1,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvMRDj6m8qeaMZyAQ5u99lXfktMz.png',
						id: 2,
					},
				],
				swiperCurrent: 0,
				dataList: [],
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {
			//没有登录跳转登录
			if(getApp().globalData.token==''){
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			
			this.userinfodata() //请求我的积分
			this.commoditytype() //获取商品分类导航栏数据
		},
		
		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.commoditydata() //调用函数
			}
		},

		methods: {
			detailsa(e) {
				var id = e
				uni.navigateTo({
					url: '/pages/exchangedetails/exchangedetails?id=' + id
				})
			},

			async userinfodata(e) {
				let apply = await request(`${getApp().globalData.http}user/get_user_info`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token
				})
				if (apply.data.code == 0) {
					this.integral = apply.data.data.accumulate
				}

			},

			//获取商品分类导航栏数据
			async commoditytype(e) {
				let apply = await request(`${getApp().globalData.http}list_commodity_type`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					cls: 3,
				})
				this.selectClassifyId = apply.data.data[0].id
				this.assignmentid = apply.data.data[0].id
				this.datalia = apply.data.data
				this.commoditydata()
			},

			//请求商品列表数据
			async commoditydata(e) {
				let apply = await request(`${getApp().globalData.http}commodity/user_list_commodity`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					page_num:this.pageIndex,
					page_size: 10,
					exchange: 2,
					type_id:this.assignmentid==this.selectClassifyId?'':this.selectClassifyId,
					name: '',
					hot: '',
					label:this.assignmentid==this.selectClassifyId?1:'',
					currency: '',
				})
				
				this.dataList = this.dataList.concat(apply.data.data)
				
				// 上拉加载数据
				if (apply.data.page_num == apply.data.total_num) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (apply.data.data.length == 0) {
					this.nomore = true
					this.nodata = true
				}
				if (apply.data.data.length !== 0) {
					this.nomore = true
					this.nodata = false
				}
				
				if (this.hasMore) {
					this.pageIndex = this.pageIndex + 1
				} else {
					this.load = false
					if (apply.data.data.length == 0) {
						this.nomore = true
					} else {
						this.nomore = false
					}
				}
				
			},

			integralda(e) {
				uni.navigateTo({
					url: '/pages/mypoints/mypoints'
				})
			},

			explain(e) {
				uni.navigateTo({
					url: '/pages/lntegralrule/lntegralrule'
				})
			},

			swiperChange(e) {
				let current = e.detail.current
				this.swiperCurrent = current
			},

			tabListChange(e) {
				
				var id = e
				
				//防止重复点击
				if(this.selectClassifyId == id){
					return
				}
				
				this.selectClassifyId = id
				this.pageIndex = 1
				this.dataList = []
				var af = id
				this.selectClassifyIda = af - 2
				this.commoditydata()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("exchange.css");

	.navbar {

		/* 去掉滚动条 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}
</style>